import styled from "styled-components";

export const LoopWrapper = styled.div`
--s: 3;
--h: 36;
--speed: 5s;
.g-container {
    /* display: flex;
    width: 300px;
    margin: auto;
    height: calc(var(--h) * 1px);
    line-height: calc(var(--h) * 1px);
    font-size: 20px;
    background: #FB7299;
    color: #fff;
    overflow: hidden; */
    ul {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        animation: move calc(var(--speed) * var(--s)) steps(var(--s)) infinite;
        li {
            flex-shrink: 0;
            width: 100%;
            padding-left: .5rem;
            box-sizing: border-box;
            white-space: nowrap;
            cursor: pointer;
            animation: liMove calc(var(--speed)) infinite;
        }
    }
}
@keyframes move {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(0, calc(var(--s) * var(--h) * -0.05rem));
    }
}

@keyframes liMove {
    0% {
        transform: translate(0, 0);
    }

    10%,
    100% {
        transform: translate(0, calc(var(--h) * -0.05rem));
    }
}
`